<template>
  <div class="wrap">
    <!--  -->
    <div class="pb-[20px] px-[20px]" v-if="false">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="所属行业" prop="industryId">
          <div class="w-[200px]">
            <el-select class="flex-1"  @change="changeIndustry" v-model="queryParams.industryId" placeholder="请选择所属行业" clearable>
              <el-option class="flex-1" v-for="item in industryList" :key="item.industryId" :label="item.name"
                :value="item.industryId" />
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="所属系统" prop="industrySystemId">
          <div class="w-[200px]">
            <el-select class="flex-1" v-model="queryParams.industrySystemId" placeholder="请选择所属系统" clearable>
              <el-option class="flex-1" v-for="item in systemList" :key="item.industrySystemId" :label="item.name"
                :value="item.industrySystemId" />
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="所属商家" prop="merchantId">
          <div class="w-[200px]">
            <el-select class="flex-1" v-model="queryParams.merchantId" placeholder="请选择所属商家" clearable>
              <el-option class="flex-1" v-for="item in merchantList" :key="item.merchantId" :label="item.name"
                :value="item.merchantId" />
            </el-select>
          </div>
        </el-form-item>


        <!-- authApiindustrysystemlist -->
        <!-- <el-form-item label="所属系统" prop="systemName">
          <el-input style="width: 200px;" v-model="queryParams.systemName" placeholder="请输入所属系统" clearable
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="所属商家" prop="merchantName">
          <el-input style="width: 200px;" v-model="queryParams.merchantName" placeholder="请输入所属商家" clearable
            @keyup.enter="handleQuery" />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="one">
      <div class="flex">
        <div class="flex one-left flex-col">
          <div class="on">
            <el-card>
              <div slot="header" class="font-bold">数据总览</div>
              <div class="">
                <div class="h-20"></div>
                <div class="ul   rounded-lg flex  h-260px flex-wrap  flex">
                  <li v-for="(item, index) in list" :key="index" :style="{ backgroundColor: item.bgColor }">
                    <div class="">
                      <div class="flex  justify-between">
                        <span>{{ item.name }}</span>
                        <el-icon :size="24">
                          <Checked />
                        </el-icon>
                      </div>
                      <div class="count mt-5px font-bold">{{ item.count || 0 }}</div>
                    </div>
                  </li>
                </div>
              </div>
            </el-card>
          </div>
          <div class="h-20"></div>
          <div class="off">
            <el-card>
              <div slot="header" class="font-bold">趋势图</div>
              <div>
                <line-chart :chart-data="lineChartData" />
              </div>
            </el-card>
          </div>
        </div>
        <div class="flex one-right flex-col">
          <div class="on">
            <el-card>
              <div slot="header" class="font-bold">消息通知</div>
              <div class="w-400px ">
                <div class="h-20"></div>
                <Swiper style="height: 260px" :modules="modules" :slides-per-view="5" :loop="true" :autoplay="{
                  disableOnInteraction: true,
                  pauseOnMouseEnter: true
                }" direction="vertical">
                  <swiper-slide v-for="(activity, index) in activities" :key="index">
                    <el-timeline-item class="notification" style="padding-left: 0;" :key="index"
                      :timestamp="activity.timestamp">
                      <div style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{
                        activity.content }}</div>
                    </el-timeline-item>
                  </swiper-slide>
                </Swiper>
              </div>
            </el-card>
          </div>
          <div class="h-20"></div>
          <div class="off h-[407px]">
            <el-card class=" h-[407px]" :body-style="{ height: '407px' }">
              <div slot="header" class="font-bold">快捷入口</div>
              <div class="flex  items-center h-[345px]">
                <div class="h-20"></div>
                <div class="grid grid-cols-4 gap-3  ">
                  <div class="mx-2 speedEnter flex flex-col justify-center flex-items-center text-center"
                    v-for="item, index in speedEnterList" :key="index">
                    <!-- <svg-icon style="width: 60px;height: 60px;" :icon-class="item.icon"></svg-icon> -->
                    <!-- <svg-icon style="width: 100px;height: 100px;" :icon-class="item.icon"></svg-icon> -->
                    <svg-icon style="width: 100px;height: 100px;" :icon-class="item.icon"></svg-icon>
                    <div class="mt-5px text-lg">{{ item.name }}</div>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
    <div class="h-20"></div>
    <div class="two">
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card>
            <div slot="header" class="font-bold">用户消费排行</div>
            <ranking />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card>
            <div slot="header" class="font-bold">用户来源渠道分布</div>
            <bar-chart />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card>
            <div slot="header" class="font-bold">用户地区分布</div>
            <pie-chart />
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="h-20"></div>
    <div class="three">
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card>
            <div slot="header" class="font-bold">单品销售榜单</div>
            <raddar-chart />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card>
            <div slot="header" class="font-bold">购物车榜单</div>
            <!-- <pie-chart /> -->
            <raddar-chart />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card>
            <div slot="header" class="font-bold">订单地域分布</div>
            <territory />
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>

</template>

<script>


import PanelGroup from ".././dashboard/PanelGroup";
import LineChart from ".././dashboard/LineChart";
import RaddarChart from ".././dashboard/RaddarChart";
import PieChart from ".././dashboard/PieChart";
import BarChart from ".././dashboard/BarChart";
import ranking from ".././dashboard/ranking";
import territory from ".././dashboard/territory";

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
};

export default {
  name: "Index",
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    ranking,
    territory,
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
    };
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
  },
};
</script>

<script setup>
let sId = ref('')
import 'swiper/css'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper'

import {
  authApiIndustryList,
  authApiindustrysystemlist,
  loginMerchantList,
} from "@/api/login.js";

const industryList = ref([])
const systemList = ref([])
const merchantList = ref([])
function authApiIndustryListApi() {
  authApiIndustryList().then(
    (res) => {
      industryList.value = [...res];
    }
  );
}
function authApiindustrysystemlistApi(query = '') {
  authApiindustrysystemlist(query).then(
    (res) => {
      systemList.value = [...res];
    }
  );
}
function loginMerchantListApi(query = '') {
  loginMerchantList(query).then(
    (res) => {
      merchantList.value = [...res.records];
    }
  );
}

const changeIndustry = async (e)=>{
  console.log(e,'eee');
  await authApiindustrysystemlistApi(queryParams.value)
  await loginMerchantListApi(queryParams.value)
}


onMounted(() => {
  authApiIndustryListApi()
  authApiindustrysystemlistApi()
  loginMerchantListApi()
})


const data = reactive({
  form: {},
  queryParams: {
    currentPage: 1,
    pageSize: 10,
    name: undefined,
    phone: undefined,
    governmentType: undefined,
    /*  */
    industryId: undefined,
    areaId: undefined,
  },
  rules: {
  },
});

const showSearch = ref(true);

const { queryParams, form, rules } = toRefs(data);

const { proxy } = getCurrentInstance();

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.currentPage = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}









const modules = [Autoplay]

/** 查询调度日志列表 */
function getList() {
}

const list = ref([
  {
    name: "销售额",
    bgColor: "#EEFAFE",
    count: 0
  },
  {
    name: "利润额",
    bgColor: "#F4F2FE",
    count: 0.00
  },
  {
    name: "利润率",
    bgColor: "#FCF2F3",
    count: 0
  },
  {
    name: "订单量",
    bgColor: "#E7F1F0",
    count: 0
  },
  {
    name: "客单价",
    bgColor: "#FEF9EE",
    count: 0
  },
  {
    name: "新增用户",
    bgColor: "#EEF8F7",
    count: 1
  },
  {
    name: "新增店铺",
    bgColor: "#F7F4FF",
    count: 0
  },
  {
    name: "商品总量",
    bgColor: "#F1F9F8",
    count: 762
  },
  {
    name: "售后金额",
    bgColor: "#FEF9EE",
    count: null
  },
  {
    name: "售后数量",
    bgColor: "#F5F2FF",
    count: null
  },
])

const activities = [
  {
    content: '正在导出数据，结果请前往任务列表查看1',
    timestamp: '2024-09-0114:18:09',
  },
  {
    content: '导出角色管理成功',
    timestamp: '2024-09-0214:18:09',
  },
  {
    content: '正在导入数据，结果请前往任务列表查看2',
    timestamp: '2024-09-0322:47:12',
  },
  {
    content: '正在导入数据，结果请前往任务列表查看3',
    timestamp: '2024-09-0942:47:25',
  },
  {
    content: '正在导入数据，结果请前往任务列表查看4',
    timestamp: '2024-09-0512:47:25',
  },
  {
    content: '正在导入数据，结果请前往任务列表查看5',
    timestamp: '2024-09-0122:47:25',
  },
  {
    content: '正在导入数据，结果请前往任务列表查看6',
    timestamp: '2024-09-0522:47:15',
  },
  {
    content: '正在导入数据，结果请前往任务列表查看7',
    timestamp: '2024-09-0222:47:27',
  },
  {
    content: '正在导入数据，结果请前往任务列表查看8',
    timestamp: '2024-09-0922:47:22',
  }
]

const speedEnterList = ref([
  {
    name: "待付款",
    icon: "icon",
    bgColor: "#EEFAFE",
    count: 0
  },
  {
    name: "待发货",
    icon: "icon",
    bgColor: "#F4F2FE",
    count: 0.00
  },
  {
    name: "待售后",
    icon: "icon",
    bgColor: "#FCF2F3",
    count: 0
  },
  {
    name: "提现审核",
    icon: "money",
    bgColor: "#E7F1F0",
    count: 0
  },
  {
    name: "商家入驻",
    icon: "logininfor",
    bgColor: "#FEF9EE",
    count: 0
  },
  {
    name: "库存预警",
    icon: "redis",
    bgColor: "#EEF8F7",
    count: 1
  },
  {
    name: "商品管理",
    icon: "lock",
    bgColor: "#F7F4FF",
    count: 0
  },
  {
    name: "活动管理",
    icon: "icon",
    bgColor: "#F1F9F8",
    count: 762
  }
])

getList()
</script>



<style lang='scss' scoped>
:deep(.el-form-item--default) {
  margin-bottom: 0px;
}

// .flex-wrap{
//   flex-wrap: wrap;
// }


.one-left {
  margin-right: 20px;
}

.h-20 {
  height: 20px;
}

.w-400 {
  width: 400px;
}

.h-290 {
  height: 290px;
}

.h-360 {
  height: 360px;
}

.h-270 {
  height: 270px;
}

.h-350 {
  height: 350px;
}

.w-1200 {
  width: 1200px;
}

.h-90 {
  height: 90px;
}

.container {
  padding: 20px;
}

.ul {
  li {
    list-style: none;
    background-color: orange;
    height: 100px;
    width: 150px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    /*  */

    margin-right: 15px;
    margin-bottom: 15px;


    // align-items: center;
    border-radius: 6px;

    span {
      text-align: left;
      // padding-left: 10px;
    }

    .count {
      text-align: left;
      font-size: 24px;
    }
  }
}

.speedEnter {}

// .flex {
//   display: flex;
// }

.flex-col {
  flex-direction: column;
}

.wrap {
  padding: 20px;
}
</style>



<style scoped>
:deep(.el-timeline-item__wrapper) {
  padding-left: 0;
}

ul {
  padding-left: 0 !important;
  margin: 0 !important;
}
</style>